<script setup>
import {computed, onMounted, ref} from 'vue'
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import axios from 'axios'

//驾照信息
const driverLicenseInfo = ref({
  name :'',
  gender:'',
  birthday:'',
  emergencyContact:'',
  emergencyPhone:'',
  auditing:'',
  licenseNumber:'',
  validDateStart:'',
  validDateEnd:'',
  address:''
})
const addDriverLicenseInfo = ref({
  name :'',
  gender:'',
  birthday:'',
  emergencyContact:'',
  emergencyPhone:'',
  licenseNumber:'',
  validDateStart:'',
  validDateEnd:'',
  address:'',
  frontImage:'',
  backImage:''



})
let thumbnailTempList =ref([])
let thumbnailTemp =ref('')

let thumbnailTempList2 =ref([])
let thumbnailTemp2 =ref('')

const resetData = ()=>{
  addDriverLicenseInfo.value.name = ''
  addDriverLicenseInfo.value.gender = ''
  addDriverLicenseInfo.value.birthday = ''
  addDriverLicenseInfo.value.emergencyContact = ''
  addDriverLicenseInfo.value.emergencyPhone = ''
  addDriverLicenseInfo.value.auditing = ''
  addDriverLicenseInfo.value.licenseNumber = ''
  addDriverLicenseInfo.value.validDateStart = ''
  addDriverLicenseInfo.value.validDateEnd = ''
  addDriverLicenseInfo.value.address = ''
  addDriverLicenseInfo.value.frontImage = ''
  addDriverLicenseInfo.value.backImage = ''
  thumbnailTemp.value=''
  thumbnailTemp2.value=''
}
//dialog

const dialogVisible = ref(false)
const dialogTitle = ref('')

const readonlyDialogVisible = ref(false)
const readonlyDialogTitle = ref('查看驾照信息')

const handleClose = ()=>{
  if(confirm("确定退出？")){
    dialogVisible.value=false;
    resetData()
  }
}
const handleReadonlyClose = ()=>{
  readonlyDialogVisible.value=false;
}
const handleSave = ()=>{
  addDriverLicenseInfo.value.validDateStart = formatDate(addDriverLicenseInfo.value.validDateStart).toString()
  addDriverLicenseInfo.value.validDateEnd = formatDate(addDriverLicenseInfo.value.validDateEnd).toString()
  addDriverLicenseInfo.value.birthday = formatDate(addDriverLicenseInfo.value.birthday).toString()
  addDriverLicenseInfo.value.frontImage = thumbnailTemp.value
  addDriverLicenseInfo.value.backImage = thumbnailTemp2.value
  console.log(addDriverLicenseInfo.value)

  request.post(`/users/driverlicense`,addDriverLicenseInfo.value).then(res => {
    ElMessage.success("提交成功")
    resetData()
    dialogVisible.value=false
    location.reload()
  })
  //

}
//驾照弹窗控制
const uploadDialogVisible = ref(false)

const handleUploadDialogClose = ()=>{
  uploadDialogVisible.value=false;

}

//是否有上传过驾照认证
const driverLicenseFlag = ref(true)
const auditing = ref(3)

const loadDriverLicenseInfo = ()=> {
  request.get(`/users/driverlicense`).then(res => {
    console.log(res.data)
    //没有找到认证信息
    if(res.data === null){
      driverLicenseFlag.value=false
    }else{
      auditing.value = res.data.auditing
    }
    Object.assign(driverLicenseInfo.value,res.data)
    driverLicenseInfo.value.gender = driverLicenseInfo.value.gender.toString()
    driverLicenseInfo.value.nationality = driverLicenseInfo.value.nationality.toString()


  })
}
//upload



function uploadFileThumbnail(file){
  const formData = new FormData()
  formData.append('file',file.file)
  request.post('/api/attach/uploadImage',formData).then(res => {

    thumbnailTempList.value=[]
    file.onSuccess(res.data)
    thumbnailTemp.value=res.data
    console.log(thumbnailTemp.value)

  })
}

function uploadFileThumbnail2(file){
  const formData = new FormData()
  formData.append('file',file.file)
  request.post('/api/attach/uploadImage',formData).then(res => {

    thumbnailTempList2.value=[]
    file.onSuccess(res.data)
    thumbnailTemp2.value=res.data
    console.log(thumbnailTemp2.value)

  })

}

const handleRemove = (uploadFile, uploadFiles) => {


}

//日期格式formater
const formatDate= (date)=> {
  var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();

  if (month.length < 2)
    month = '0' + month;
  if (day.length < 2)
    day = '0' + day;

  return [year, month, day].join('-');
}
//options
const genderOptions =ref()
const nationalityOptions = ref()
const auditingOptions = ref([
  {
    value: 0,
    label: '认证成功'
  },
  {
    value: 1,
    label: '审核中'
  },
  {
    value: 2,
    label: '认证失败'
  },
  {
    value: 3,
    label: '未认证'
  }

])
//加载字典项----------------------------------------------------------------------
const loadAllDictOptions = ()=>{
  loadDictOptionsByCode(genderOptions,'sys_user_sex')
  loadDictOptionsByCode(nationalityOptions,'bus_user_nationality')

}
//formater-----------------------------------------------------------------
const auditingFormatter = (val)=>{

  for(let index in auditingOptions.value){
    if(auditingOptions.value[index].value==val){
      val = auditingOptions.value[index].label
      return val
    }
  }
  return val
}
const genderFormatter = (val)=>{

  for(let index in genderOptions.value){
    if(genderOptions.value[index].value==val){
      val = genderOptions.value[index].label
      return val
    }
  }
  return val
}
const nationalityFormatter = (val)=>{

  for(let index in nationalityOptions.value){
    if(nationalityOptions.value[index].value==val){
      val = nationalityOptions.value[index].label
      return val
    }
  }
  return val
}

onMounted(()=>{
  loadDriverLicenseInfo()
  loadAllDictOptions()
})



</script>

<template>
  <div style="width: 100%;border: 1px solid rgb(220, 223, 230)">
    <div style="padding: 20px 20px; position: relative" >
      <h2>证件认证</h2>
      <el-row :gutter="10">
        <el-col :span="5">
        </el-col>
        <el-form  label-width="150px" style="width: 50%">
          <el-col :span="24">
            <el-form-item label="驾照认证:" >
              <el-input readonly v-model="driverLicenseInfo.licenseNumber" style="width: 100%;" placeholder="未认证"/>
            </el-form-item>
            <span style="position: absolute; right:205px; top: 5px; font-size: 12px; cursor: default" > {{auditingFormatter(auditing)}} </span>
          </el-col>
          <el-col :span="24">
            <el-form-item label="紧急联系人姓名:" >
              <el-input readonly v-model="driverLicenseInfo.emergencyContact" style="width: 100%; "/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="紧急联系人手机:" >
              <el-input readonly v-model="driverLicenseInfo.emergencyPhone" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="24">

          </el-col>
          <el-row v-if="driverLicenseFlag===true" gutter="10">
            <el-col :span="6"></el-col>
            <el-col :span="9">
              <el-button v-show="auditing!==1" type="info" style="width: 100%" @click="dialogVisible=true; dialogTitle='驾照认证'">修改</el-button>
            </el-col>
            <el-col :span="9">
              <el-button  type="primary"  style="width: 100%" @click="readonlyDialogVisible=true">查看详情</el-button>
            </el-col>
          </el-row>
          <el-row v-else>
            <el-col :span="6"></el-col>
            <el-col :span="9">
            </el-col>
            <el-col :span="9">
              <el-button type="primary"  style="width: 100%" @click="dialogVisible=true; dialogTitle='驾照认证'">点击上传</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <!--       弹窗-->
      <el-dialog :title="dialogTitle" v-model="dialogVisible" width="30%" :before-close="handleClose">

        <el-form  label-width="120px" style="width: 100%">
          <el-col :span="24">
            <el-form-item label="姓名:" style="width: 100%">
              <el-input v-model="addDriverLicenseInfo.name" style="width: 100%;" placeholder="请填写姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="性别:">
              <el-select v-model="addDriverLicenseInfo.gender" style="width: 100%;">
                <el-option v-for="(item,index) in genderOptions" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="出生日期:" >
              <el-date-picker
                  v-model="addDriverLicenseInfo.birthday"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="国籍:" >
              <el-select v-model="addDriverLicenseInfo.nationality" style="width: 100%;" placeholder="请选择国籍">
                <el-option v-for="(item,index) in nationalityOptions" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="证件号:" >
              <el-input v-model="addDriverLicenseInfo.licenseNumber" style="width: 70%;" placeholder="请填写证件号" />
              <el-button style="width: 30%" @click="uploadDialogVisible=true">上传驾照</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="有效时间开始:" >
              <el-date-picker
                  v-model="addDriverLicenseInfo.validDateStart"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="有效时间结束:" >
              <el-date-picker
                  v-model="addDriverLicenseInfo.validDateEnd"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地址:" style="width: 100%">
              <el-input v-model="addDriverLicenseInfo.address" style="width: 100%;" placeholder="请填写地址" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label=" 紧急联系人姓名:">
                <el-input v-model="addDriverLicenseInfo.emergencyContact" style="width: 100%;" placeholder="请填写紧急联系人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label=" 紧急联系人电话:">
                <el-input v-model="addDriverLicenseInfo.emergencyPhone" style="width: 100%;" placeholder="请填写紧急联系人电话" />
            </el-form-item>
          </el-col>
          <el-row :gutter="10" >
            <el-col :span="8"></el-col>
            <el-col :span="8">
              <el-button type="info" style="width: 100%;" @click="handleClose" >取消</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" style="width: 100%;" @click=" handleSave" >确认</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <!-- 上传驾照弹窗     -->
      <el-dialog title="上传驾照" v-model="uploadDialogVisible" width="600px" :before-close="handleUploadDialogClose">
        <el-row :gutter="10" style="width: 100%">
          <el-col :span="12">
            <div style="width: 100%; height: 180px; border: 1px solid rgb(220, 223, 230);" >
              <img :src="thumbnailTemp" style="width: 100%" alt="">
            </div>
          </el-col>
          <el-col :span="12">
            <div style="width: 100%; height: 180px; border: 1px solid rgb(220, 223, 230);" >
              <img :src="thumbnailTemp2" style="width: 100%" alt="">

            </div>

          </el-col>
          <el-row :gutter="10" style="width: 100%; margin-top: 10px">
            <el-col :span="12">
              <el-upload
                  v-model:file-list="thumbnailTempList"
                  action=""
                  :http-request="uploadFileThumbnail"
                  :on-remove="handleRemove"
                  :limit="1"
                  style="float: right"
              >
                <el-button type="primary" size="small" icon="el-icon-upload" style="width: 100%">点击上传驾照正面</el-button>
              </el-upload>
            </el-col>
            <el-col :span="12">
              <el-upload
                  v-model:file-list="thumbnailTempList2"
                  action=""
                  :http-request="uploadFileThumbnail2"
                  :on-remove="handleRemove"
                  :limit="1"
                  style="float: right"
              >
                <el-button type="primary" size="small" icon="el-icon-upload" style="width: 100%">点击上传驾照背面</el-button>
              </el-upload>
            </el-col>
          </el-row>
        </el-row>
        <div style="width: 100%; height: 30px;">
          <el-button type="primary" style="float: right" @click="uploadDialogVisible=false">确认</el-button>
          <el-button style="float: right" @click="uploadDialogVisible=false; thumbnailTemp=''; thumbnailTemp2=''; ">取消</el-button>
        </div>

      </el-dialog>
      <!--readonly dialog      -->
      <el-dialog :title="readonlyDialogTitle" v-model="readonlyDialogVisible" width="30%" :before-close="handleReadonlyClose">

        <el-form  label-width="120px" style="width: 100%">
          <el-col :span="24">
            <el-form-item label="姓名:" style="width: 100%">
              <el-input v-model="driverLicenseInfo.name" style="width: 100%;" placeholder="请填写姓名" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="性别:">
              <el-select v-model="driverLicenseInfo.gender" style="width: 100%;" disabled>
                <el-option v-for="(item,index) in genderOptions" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="出生日期:" >
              <el-date-picker
                  v-model="driverLicenseInfo.birthday"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  style="width: 100%"
                  readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="国籍:" >
              <el-select v-model="driverLicenseInfo.nationality" style="width: 100%;" placeholder="请选择国籍" disabled>
                <el-option v-for="(item,index) in nationalityOptions" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="证件号:" >
              <el-input v-model="driverLicenseInfo.licenseNumber" style="width: 100%;" placeholder="请填写证件号" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="有效时间开始:" >
              <el-date-picker
                  v-model="driverLicenseInfo.validDateStart"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  style="width: 100%"
                  readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="有效时间结束:" >
              <el-date-picker
                  v-model="driverLicenseInfo.validDateEnd"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  style="width: 100%"
                  readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地址:" style="width: 100%">
              <el-input v-model="driverLicenseInfo.address" style="width: 100%;" placeholder="请填写地址" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label=" 紧急联系人姓名:">
              <el-input v-model="driverLicenseInfo.emergencyContact" style="width: 100%;" placeholder="请填写紧急联系人姓名" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label=" 紧急联系人电话:">
              <el-input v-model="driverLicenseInfo.emergencyPhone" style="width: 100%;" placeholder="请填写紧急联系人电话" readonly/>
            </el-form-item>
          </el-col>
          <el-row :gutter="10" >
            <el-col :span="8"></el-col>
            <el-col :span="8">

            </el-col>
            <el-col :span="8">
              <el-button type="primary" style="width: 100%;" @click=" handleReadonlyClose" >确认</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <!-- 上传驾照弹窗     -->
      <el-dialog title="上传驾照" v-model="uploadDialogVisible" width="600px" :before-close="handleUploadDialogClose">
        <el-row :gutter="10" style="width: 100%">
          <el-col :span="12">
            <div style="width: 100%; height: 180px; border: 1px solid rgb(220, 223, 230);" >
              <img :src="thumbnailTemp" style="width: 100%" alt="">
            </div>
          </el-col>
          <el-col :span="12">
            <div style="width: 100%; height: 180px; border: 1px solid rgb(220, 223, 230);" >
              <img :src="thumbnailTemp2" style="width: 100%" alt="">

            </div>

          </el-col>
          <el-row :gutter="10" style="width: 100%; margin-top: 10px">
            <el-col :span="12">
              <el-upload
                  v-model:file-list="thumbnailTempList"
                  action=""
                  :http-request="uploadFileThumbnail"
                  :on-remove="handleRemove"
                  :limit="1"
                  style="float: right"
              >
                <el-button type="primary" size="small" icon="el-icon-upload" style="width: 100%">点击上传驾照正面</el-button>
              </el-upload>
            </el-col>
            <el-col :span="12">
              <el-upload
                  v-model:file-list="thumbnailTempList2"
                  action=""
                  :http-request="uploadFileThumbnail2"
                  :on-remove="handleRemove"
                  :limit="1"
                  style="float: right"
              >
                <el-button type="primary" size="small" icon="el-icon-upload" style="width: 100%">点击上传驾照背面</el-button>
              </el-upload>
            </el-col>
          </el-row>
        </el-row>
        <div style="width: 100%; height: 30px;">
          <el-button type="primary" style="float: right" @click="uploadDialogVisible=false">确认</el-button>
          <el-button style="float: right" @click="uploadDialogVisible=false; thumbnailTemp=''; thumbnailTemp2=''; ">取消</el-button>
        </div>

      </el-dialog>
    </div>
  </div>
</template>

<style scoped>

</style>